<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="//unpkg.com/layui@2.9.3/dist/css/layui.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery.min.js"></script>

</head>
<body>
<div class="layui-row">
  <div class="matchground layui-col-xs7">
    <div class="layui-row">
      <div class="col-12" style="text-align: center; font-size: 1.5rem; font-weight: 300; color: red ">
        <label  class="btn btn-warning btn-lg">为你喜欢的歌手投票吧！</label>
        <button class="layui-btn layui-btn-xs" id="shuaxin">刷新</button>
        <p>距离比赛结束还有：</p>
        <p id="countdown"></p>
      </div>
      <div class="layui-col-xs4">
        <div class="user-score" >最终得分: <p id="ascore" style="margin-left: 15px"></p></div>
        <div class="user-photo">
          <img src="../../singer/showPic/${asinger.pic}" style="width: 200px; height: 200px"/>
        </div>
        <div class="user-username">
          ${asinger.name}
        </div>
        <div class="user-motto">${asinger.motto}</div>
        <div class="user-btn">
            <c:if test="${competition.status == 0}">
          <button type="button" id="avote" class="layui-btn layui-bg-blue">投票</button>
            </c:if>
          <c:if test="${userrole == 2}">
            <c:if test="${competition.status == 0}">
              <button type="button" id="ajudge" class="layui-btn layui-bg-blue">打分</button>
            </c:if>
          </c:if>
        </div>
        <div class="user-btn">
          <c:if test="${competition.status == 0}">
          <button type="button" id="cancelavote" class="layui-btn layui-bg-red">取消投票</button>
          </c:if>
        </div>
      </div>
      <div class="layui-col-xs4">
        <div class="user-select-bot" style="margin-top: -80px;">
          <label style="color: white">比赛主题</label>
          <div style="margin-top: 10px;color: white">《${competition.theme}》</div>
          <img src=../../../static/images/pk.png style="width: 200px; height: 200px; margin-top: 20px;">
        </div>
      </div>
      <div class="layui-col-xs4">
        <div class="user-score" >最终得分: <p id="bscore" style="margin-left: 15px"></p></div>
        <div class="user-photo">
          <img src="../../singer/showPic/${bsinger.pic}" style="width: 200px; height: 200px;" />
        </div>
        <div class="user-username">
          ${bsinger.name}
        </div>
        <div class="user-motto">${bsinger.motto}</div>
        <div class="user-btn">
          <c:if test="${competition.status == 0}">
          <button type="button" id="bvote" class="layui-btn layui-bg-blue">投票</button>
          </c:if>

          <c:if test="${userrole == 2}">
            <c:if test="${competition.status == 0}">
              <button type="button" id="bjudge" class="layui-btn layui-bg-blue">打分</button>
            </c:if>
          </c:if>
        </div>
        <div class="user-btn">
        <c:if test="${competition.status == 0}">
          <button type="button" id="cancelbvote" class="layui-btn layui-bg-red">取消投票</button>
        </c:if>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-col-xs2">
    <div id="singerChart" class="singerChart"></div>
  </div>
  <div class=" layui-col-xs2">
    <div id="judgeChart" class="singerChart"></div>
  </div>
</div>
</body>

<script src="/layui/jquery.min.js"></script>
<script>
  var $ = jQuery.noConflict();
</script>
<script src="/layui/layui.js"></script>
<script src="/layui/echarts.js"></script>
<script type="text/javascript">
  let table, $, layer;
  let row;
  layui.use(['table','jquery','layer'], function(){
    table = layui.table
            ,layer=layui.layer
            ,$=layui.jquery;
  });
  jQuery(document).ready(function(){
    // 绑定 avote 函数到按钮 id 为 avote 上的点击事件
    jQuery("#avote").on("click", function(){
      avote();
    });
    // 绑定 bvote 函数到按钮 id 为 bvote 上的点击事件
    jQuery("#bvote").on("click", function(){
      bvote();
    });
    jQuery("#cancelavote").on("click", function(){
      cancelavote();
    });
    jQuery("#cancelbvote").on("click", function(){
      cancelavote();
    });
    jQuery("#shuaxin").on("click", function(){
      vote();
    });
    jQuery("#ajudge").on("click", function(){
      ajudge();
    });
    jQuery("#bjudge").on("click", function(){
      bjudge();
    });
  });
  setInterval(function() {
    vote();
    judge();
    updateCountdown();
    ascore();
    bscore();
  }, 1000);
  // 获取从后端传递的时间差信息
  var days = ${days};
  var hours = ${hours};
  var minutes = ${minutes};
  var seconds = ${seconds};
  var status = ${competition.status};
  var dangqianstatus = false;
  function updateCountdown() {
    var countdownElement = document.getElementById("countdown");
    // 更新时间差
    if (days > 0 || hours > 0 || minutes > 0 || seconds > 0) {
      if (seconds === 0) {
        if (minutes === 0) {
          if (hours === 0) {
            days--;
            hours = 23;
            minutes = 59;
            seconds = 59;
          } else {
            hours--;
            minutes = 59;
            seconds = 59;
          }
        } else {
          minutes--;
          seconds = 59;
        }
      } else {
        seconds--;
      }
      countdownElement.innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
    } else {
      // 倒计时结束的处理
      countdownElement.innerHTML = "比赛结束！！";
      if (status == 0 && !dangqianstatus){
      $.ajax({
        url: `../../audiencevote/end/${competition.competitionid}/${asinger.singerid}/${bsinger.singerid}`,
        type: "post",
      });
        dangqianstatus = true;
        location.reload();
      }
    }
  }
  function ascore() {
    var ascoreElement = document.getElementById("ascore");
    $.ajax({
      url: `../../audiencevote/ascore/${competition.competitionid}/${asinger.singerid}`,
      type: "post",
      success: function(res) {
        var ascore = res.ascore;
        ascoreElement.innerHTML = ascore;
      }
    });
  }
  function bscore() {
    var bscoreElement = document.getElementById("bscore");
    $.ajax({
      url: `../../audiencevote/bscore/${competition.competitionid}/${bsinger.singerid}`,
      type: "post",
      success: function(res) {
        var bscore = res.bscore;
        bscoreElement.innerHTML = bscore;
      }
    });
  }
  function avote(){
    $.ajax({
      url: `../../audiencevote/insert/${asinger.singerid}/${userid}/${competition.competitionid}`,
      type: "post",
      success: function(res) {
        var singername = res.singername;
       if(res.message == "投票成功"){
         layer.msg("投票成功"),{
           offset: '35px',
           icon:5,
         }
       }
       else if(res.message == "你已经投过票了"){
         layer.msg("你已投票给"+singername+"不能再投"),{
           offset: '25px',
           icon:5,
         }
       }
       else{
         layer.msg("管理员不能投票"),{
           offset: '25px',
           icon:5,
         }
       }
      }
    });
    vote();
  }

  function bvote(){
    $.ajax({
      url: `../../audiencevote/insert/${bsinger.singerid}/${userid}/${competition.competitionid}`,
      type: "post",
      success: function(res) {
        var singername = res.singername;
        console.log(singername);
        if(res.message == "投票成功"){
          layer.msg("投票成功"),{
            offset: '15px',
            icon:5,
          }
        }
        else if(res.message == "你已经投过票了"){
          layer.msg("你已投票给"+singername+"不能再投"),{
            offset: '25px',
            icon:5,
          }
        }
        else{
          layer.msg("管理员不能投票"),{
            offset: '25px',
            icon:5,
          }
        }
      }
    });
    vote();
  }
  function cancelavote(){
    $.ajax({
      url: `../../audiencevote/delete/${userid}/${competition.competitionid}`,
      type: "post",
      success: function(res) {
        if(res.message == "取消成功"){
          layer.msg("取消成功"),{
            offset: '15px',
            icon:5,
          }
        }
      }
    });
    vote();
  }

  function ajudge(){
    layer.open({
      type: 2,
      title: "打分",
      area: ['400px', '300px'],
      skin: 'layui-layer-rim',
      content:  '../../audiencevote/ajudge/${competition.competitionid}',
      success: function(index, layero){
      },
    });
    judge();
  }
  function bjudge(){
    layer.open({
      type: 2,
      title: "打分",
      area: ['400px', '300px'],
      skin: 'layui-layer-rim',
      content:  '../../audiencevote/bjudge/${competition.competitionid}',
      success: function(index, layero){
      },
    });
    judge();
  }

  function vote(){
    $.ajax({
      url: `../../audiencevote/vote/${competition.competitionid}/${asinger.singerid}/${bsinger.singerid}`,
      type: "post",
      success: function (res){
        var singerData = [
          { name: '${asinger.name}', votes: res.avote, color: '#ff7f50'},
          { name: '${bsinger.name}', votes: res.bvote , color: '#FFFFFF'}
        ];
        // 使用 ECharts 初始化图表
        var singerChart = echarts.init(document.getElementById('singerChart'));
        // 省略其他图表配置和数据

        // 构造图表配置
        var option = {
          title: {
            text: '歌手对战票数'
          },
          xAxis: {
            type: 'category',
            data: singerData.map(function (item) {
              return item.name;
            })
          },
          yAxis: {
            type: 'value',
            name: '票数',
            max:20
          },
          series: [{
            type: 'bar',
            data: singerData.map(function (item) {
              return {
                value: item.votes,
                itemStyle: {
                  color: item.color
                },

                label: {
                  show: true,
                  position: 'top',
                  color: item.color // 设置文字颜色
                }
              };
            })
          }]
        };
        // 将配置设置到图表中
        singerChart.setOption(option);
      }
    });
  }
  function judge(){
    $.ajax({
      url: `../../audiencevote/judge/${competition.competitionid}`,
      type: "post",
      success: function (res){
        var judgeData = [
          { name: '${asinger.name}', votes: res.ajudge, color: '#ff7f50'},
          { name: '${bsinger.name}', votes: res.bjudge , color: '#FFFFFF'}
        ];
        var judgeChart = echarts.init(document.getElementById('judgeChart'));
        var option = {
          title: {
            text: '裁判打分'
          },
          xAxis: {
            type: 'category',
            data: judgeData.map(function (item) {
              return item.name;
            })
          },
          yAxis: {
            type: 'value',
            name: '得分',
            max:100
          },
          series: [{
            type: 'bar',
            data: judgeData.map(function (item) {
              return {
                value: item.votes,
                itemStyle: {
                  color: item.color
                },

                label: {
                  show: true,
                  position: 'top',
                  color: item.color // 设置文字颜色
                }
              };
            })
          }]
        };
        judgeChart.setOption(option);
      }
    });
  }

</script>
<style>
  div.singerChart{
    width: 100%; /* 调整柱状图的宽度 */
    height: 400px;
    margin-left: auto; /* 将左边距设置为 auto，使其靠右对齐 */
    margin-top: 25vh; /* 设置向下的偏移量 */
    display: inline-block; /* 设置为内联块元素，使其在同一行显示 */
  }
  html{
    background: url(../../../static/images/singer.png) no-repeat;
    background-size: 100% 100%;
  }
  div.matchground {
    width: 60vw;
    height: 90vh;
    margin: 40px auto;
    background-color: rgba(50, 50, 50, 0.5);
    padding: 20px; /* 增加内边距，使内容不贴边 */
    box-sizing: border-box; /* 让内边距不影响盒子的实际大小 */
  }
  div.user-photo {
    text-align: center;
    padding-top: 5vh; /* 调整垂直居中的值 */
  }
  div.user-photo > img {
    border-radius: 50%;
    max-width: 20vh;
    height: auto;
  }
  div.user-photo img {
    padding: 10px;
  }
  div.user-username {
    margin-top: 2vh;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
  }
  div.user-btn {
    margin-top: 2vh;
    text-align: center;
  }
  div.user-motto {
    margin-top: 2vh;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    color: white;
  }
  div.user-score{
    display: flex;
    justify-content: center;
    margin-top: 2vh;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    color: red;
  }
  div.user-select-bot {
    text-align: center;
    font-size: 1.5rem; /* 调整字体大小 */
    font-weight: 400;
    /*margin-left: 8vh;*/
    padding-top: 15vh; /* 调整垂直间距 */
  }
  div.user-select-bot > select {
    width: 60%;
    margin: 0 auto;
  }
</style>
</html>
